<template>
  <!-- 动态标题：我的关注（自己）/ TA的关注（他人） -->
  <UserRelationList :title="title" :backPath="backPath" :userList="followsList" :pageNum="pageNum"
    @handleItem="handleFollow" />
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router'; // 用于获取路由参数
import UserRelationList from '@/components/common/UserRelationList.vue';
import { getFollowersAPI } from "@/api/user/user"; // 关注列表API
import { useUserStore } from "@/store/modules/user/user";
import { triggerFollowAPI } from "@/api/message/message"; // 关注操作API

// 获取路由实例，用于获取路径参数
const route = useRoute();
const { proxy } = getCurrentInstance();
const userStore = useUserStore();

// 当前登录用户ID（发起关注操作的主体）
const currentLoginUserId = userStore.userInfo.userId;

// 目标用户ID（要查看谁的关注列表，优先从路由参数取，默认用当前登录用户）
const targetUserId = ref(route.params.targetUserId || currentLoginUserId);
// 关注列表数据
const followsList = ref([]);
// 分页参数
const pageNum = ref(1);
// 动态标题
const title = ref('');
// 返回路径（可自定义，默认返回个人主页）
const backPath = ref('/user');

// 初始化标题（根据目标用户是否为自己）
const initTitle = () => {
  title.value = targetUserId.value === currentLoginUserId ? '我的关注' : 'TA的关注';
};

// 获取关注列表数据（使用 targetUserId 动态查询）
async function getFollowsList() {
  if (!targetUserId.value) return; // 确保用户ID有效
  const res = await getFollowersAPI(targetUserId.value, pageNum.value);
  if (res.code === 200) {
    followsList.value = res.data;
  }
}

// 处理关注/取消关注（当前登录用户操作列表中的用户）
async function handleFollow({ item, newStatus }) {
  try {
    // 发起操作的是当前登录用户，被操作的是列表中的用户（item.userId）
    const res = await triggerFollowAPI(currentLoginUserId, item.userId);
    if (res.code === 200) {
      // 更新本地关注列表的状态
      const index = followsList.value.findIndex(i => i.userId === item.userId);
      if (index > -1) {
        followsList.value[index].bothStatus = newStatus;
      }
      proxy.$toast({ message: res.data });
    }
  } catch (error) {
    console.error('关注操作失败：', error);
    proxy.$toast({ message: '操作失败', type: 'error' });
  }
}

// 监听路由参数中 targetUserId 的变化（如从查看A的关注切换到查看B的关注）
watch(() => route.params.targetUserId, (newId) => {
  if (newId) {
    targetUserId.value = newId; // 更新目标用户ID
    pageNum.value = 1; // 重置分页
    initTitle(); // 重新设置标题
    getFollowsList(); // 重新加载关注列表
  }
});

// 页面初始化
onMounted(() => {
  initTitle();
  getFollowsList();
});
</script>